import { useRef, useMemo } from "openinula";
import ECharts from "inula-echarts";
import { AnimateTransition } from "inula-transitions";

function NormalChart(props) {
  const nodeRef = useRef(null);

  const chartStyle = {
    width: "410px",
    height: "218px",
    left: "33px",
    top: "58px",
    position: "absolute",
  };

  const option = useMemo(() => {
    const { meta } = props;

    if (meta.option) {
      return meta.option();
    }

    return null;
  });

  return (
    <AnimateTransition nodeRef={nodeRef} appear={true} in={true} timeout={1000} classNames={props.meta.transitionClass}>
      <div ref={nodeRef} className="pane normal" style={props.style}>
        <div className="pane-title">{props.meta.title}</div>
        <ECharts option={option} style={chartStyle} />
      </div>
    </AnimateTransition>
  );
}

export default NormalChart;
